/* callimachus.less
 * Import the style rules and default values
 */

/* https://github.com/jquery/jquery-ui  */
@import url("jquery.ui.all.less");

/* https://github.com/twitter/bootstrap */
@import url("../assets/bootstrap/less/bootstrap.less");

/* Callimachus bootstrap overrides */
@import url("callimachus-variables.less");

/* disable screen only elements */
@import (less) url("../styles/callimachus-print.css");

/* callimachus.css */

html {
    overflow-y: scroll;
}

.wait,.wait * {
    cursor:wait;
}

.drag-over {
    cursor:copy;
}

html.logout .protected,
html.logout .hidden-logout {
    display: none !important;
}

html.login .hidden-login {
    display: none !important;
}

html.iframe .hidden-iframe {
    display: none !important;
}

html.iframe {
    overflow-y: scroll;
}

time {
    white-space:nowrap;
}

[dropzone] .ui-state-highlight {
    white-space:nowrap;
}

iframe.ui-widget-content.ui-dialog-content {
    margin:0;
    padding:0;
}

pre {
    white-space:pre-wrap;
}

img.icon {
    max-height:1em;
    padding-right:2pt;
    vertical-align:text-top;
}

a.ui-icon {
    display:inline-block;
    vertical-align:text-bottom;
}

.flex {
    display:block;
}

.summary {
    line-height:1em;
    max-height:3.1em;
    overflow:hidden;
}

.summary * {
    margin:0;
    padding:0;
}

/* theme rules */

div, footer, iframe { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

.navbar-form {
    border: 0;
    padding-top: 0;
    padding-bottom: 0;
    .box-shadow(none);
}

html.iframe .container {
    padding: 0;
    width: auto;
}

.ui-dialog {
    padding-bottom: 0;
    .box-shadow(0 5px 10px rgba(0,0,0,0.2));
    max-width: 640px;
}

/* add a border to the iframe */
form iframe {
    border: 1px solid @gray-light;
}

form {
    margin-bottom: 0;
}

.container > .tab-content {
    padding-top: 0.5em;
}

/* breadcrumbs */

.navbar + .container > *.breadcrumb:first-child {
    margin-bottom: 0px;
    padding: 5px 2px;
    background-color: transparent;
    opacity: 0.8;
}

.navbar + .container > *.breadcrumb:first-child .divider {
    padding: 0 10px;
}

/* sidebar */

html.iframe .sidebar {
    margin-top: 1rem;
}

.sidebar aside {
    .box-shadow(0 0 7px rgba(0, 0, 0, 0.1) inset);
    padding: 1rem;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
}

.sidebar aside p:last-child {
    margin-bottom: 0;
}    

.sidebar aside h3 {
    line-height: 1rem;
    margin-top: 0;
}

/* footer */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html.iframe,
html.iframe body {
    height: auto;
}

.navbar-relative-bottom {
    width: 100%;
    position: relative;
    clear: both;
    border-top: 1px solid @navbar-default-border;
    height: @navbar-height;
    margin-bottom: 0;
    box-sizing: border-box;
}
.until-navbar-large {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -@navbar-large-height;
    padding: 0 0 @navbar-large-height;
}
.until-navbar-large + .navbar-large.navbar-relative-bottom {
    height: @navbar-large-height;
}
html.iframe .until-navbar-large {
    min-height: inherit;
    padding-bottom: inherit;
}

.navbar-large {
    height: @navbar-large-height;
}

.navbar-large .navbar-inner {
    min-height: @navbar-large-height;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.navbar-relative-bottom {
  position: relative;
  right: 0;
  left: 0;
  z-index: auto;
  margin-bottom: 0; // remove 18px margin for default navbar
}
.navbar-relative-bottom .navbar-inner {
  border-width: 1px 0 0;
}

.navbar-relative-bottom {
  bottom: 0;
  .navbar-inner {
    .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
  }
}

/* drag-drop states */

.dragover, .drag-over,
.dragover td, .drag-over td {
    cursor: copy;
    background: #ddd !important;
}

/* responsive tweaks */

@media (min-width: @screen-xs) and (max-width: @screen-xs-max) {

    .sidebar {
        width: 18rem;
        float: right;
    }
 
    .sidebar ~ .nav {
        margin-right: 20rem;
    }

    .sidebar ~ .nav:after {
        clear: left;
    }

    html.login .sidebar {
        width: auto;
        float: none; /* don't float if tab-nav visible */
    }
 
    html.login .sidebar ~ .nav {
        margin-right: 0;
    }

    html.login.iframe .sidebar {
        width: 18rem;
        float: right;
    }
 
    html.login.iframe .sidebar ~ .nav {
        margin-right: 20rem;
    }
}

@media (min-width: @screen-sm) {

    .sidebar {
        width: 18rem;
        float: right;
    }
 
    .sidebar ~ .nav {
        margin-right: 20rem;
    }

    .sidebar ~ .nav:after {
        clear: left;
    }
}

